// item
<template>
  <div class="log-item" :style="style" :class="`log-item-${source.index} ${source.active ? 'active' : ''}`">
    <div class="line-content">
      <span v-html="dataHtml" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'LogItem',
  props: {
    source: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    dataHtml() {
      let html = this.source.text
      if (!this.source.searchString) {
        return html
      }
      html = html.replace(new RegExp(`(${this.source.searchString})`, 'gi'), '<mark>$1</mark>')
      return html
    },
    style() {
      const color = '#ffffff'
      return {
        color
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .log-item {
    display: block;
  }

  .log-item:hover {
    background: rgba(55, 57, 59, 0.5);
  }

  .log-item:first-child .line-no {
    padding-top: 10px;
    text-align: right;
  }

  .log-item .line-no {
    display: inline-block;
    width: 70px;
    color: #A9B7C6;
    background: #313335;
    padding-right: 10px;
    text-align: right;
  }

  .log-item.active .line-no {
    background: #E6A23C;
    color: white;
    font-weight: bolder;
  }

  .log-item .line-content {
    padding-left: 10px;
    display: inline-block;
    width: calc(100% - 70px);
    white-space: nowrap;
    text-align: left;

    ::v-deep b > span {
       color: #FFBA00 !important;
    }
  }

  .loading-text {
    margin-right: 5px;
    animation: blink 2s ease-in infinite;
  }

  @keyframes blink {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.3;
    }

    100% {
      opacity: 1;
    }
  }
</style>
